<template>
	<view>
		<view class="search-box">
			<u-search shape="square" height="88"
				bg-color="#F7F8FA"
				placeholder="请输入工号/电话/姓名/邮箱"
				placeholder-color="#CCCCCC"
				search-icon-color="#999999"
				:action-style="{fontSize: '30rpx', fontWeight: 'bold', color: '#0071C5'}"
				:input-style="{fontSize: '28rpx'}"
				disabled
				@click="toSearch">
			</u-search>
		</view>
		<scroll-view class="crumbs-box" scroll-x="true">
			<view class="u-flex-nowrap u-flex">
				<view class="crumbs-item"
					v-for="(item, i) in crumbsList"
					:class="{active: i < crumbsList.length - 1}"
					:key="i"
					@click="showPrevOrg(item, i)">
					{{item.name}}
					<u-icon v-if="i < crumbsList.length - 1"
						style="padding: 0 10rpx;"
						name="arrow-right" size="17"
						color="#B3B3B3"></u-icon>
				</view>
			</view>
		</scroll-view>
		<view class="org-list-box">
			<template v-for="(item, i) in list">
				<au-contact-cell v-if="item.type === 'user'" :contact-info="item" @click="toUserInfo" positionNameAttr="userInfo.positionName"></au-contact-cell>
				<view v-else class="org-list-item u-flex" :key="i" @click="showNextOrg(item)">
					<view class="org-title u-flex-1 u-line-1">
						{{item.fullName}}
					</view>
					<view class="org-arrow">
						<u-icon name="arrow-right" size="24" color="#B3B3B3"></u-icon>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				crumbsList: []
			}
		},
		methods: {
			loadOrg(pId) {
				this.$u.api.getOrgUsers({orgId: pId}).then(res => {
					this.list = res.list
					console.log(res)
				}).catch(err => {
					console.log(err)
				})
			},
			showNextOrg(pOrg) {
				this.crumbsList.push({
					id: pOrg.id,
					name: pOrg.fullName
				})
				this.loadOrg(pOrg.id)
			},
			showPrevOrg(pOrg, i) {
				if (i < this.crumbsList.length - 1) {
					this.crumbsList.pop()
					this.loadOrg(pOrg.id)
				}
			},
			toUserInfo(pUser) {
				this.$u.route('pages/contacts/user-info', {id: pUser.id})
			},
			toSearch() {
				this.$u.route('pages/contacts/search-user')
			}
		},
		onLoad(option) {
			if (option.id) {
				if (option.isUser) {
					this.$u.api.findParentOrg({orgId: option.id}).then(res => {
						this.crumbsList = res.reverse()
					}).catch(err => {
						console.log(err)
					})
				} else {
					this.crumbsList.push({
						id: option.id,
						name: option.fullName
					})
				}
				this.loadOrg(option.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-box {
		padding: 14rpx 30rpx;
		background-color: #FFFFFF;
	}
	.crumbs-box {
		box-sizing: border-box;
		padding: 27rpx 30rpx 16rpx 30rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		background-color: #FFFFFF;
		.crumbs-item {
			white-space: nowrap;
		}
		.active {
			color: #0071C5;
		}
	}
	
	.org-list-box {
		margin-top: 10rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
		.org-list-item {
			padding: 30rpx 0;
			border-bottom: 1px solid #E6E7E8;;
			.org-title {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
			}
		}
	}
</style>
